<template>
  <div>
    <Dog v-for="(item, index) in list" :key="index" :imgUrl="item.dogImgUrl" :dogName="item.dogName" @love="love"></Dog>
    <div>
      <p>显示喜欢的狗:</p>
      <hr />
      <ul>
        <li v-for="(item, index) in loveArr" :key="index">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import Dog from './components/Dog.vue'
export default {
  name: '',
  components: {
    Dog,
  },
  props: {},
  data() {
    return {
      list: [
        {
          dogImgUrl: 'https://img0.baidu.com/it/u=787131192,551659962&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500',
          dogName: '博美',
        },
        {
          dogImgUrl: 'https://img0.baidu.com/it/u=3126764811,2706534119&fm=253&fmt=auto&app=138&f=PNG?w=667&h=500',
          dogName: '泰迪',
        },
        {
          dogImgUrl: 'https://img0.baidu.com/it/u=3741081638,3332798201&fm=253&fmt=auto&app=138&f=JPEG?w=670&h=444',
          dogName: '金毛',
        },
        {
          dogImgUrl: 'https://img1.baidu.com/it/u=2086819842,1464753582&fm=253&fmt=auto&app=120&f=JPEG?w=631&h=461',
          dogName: '哈士奇',
        },
        {
          dogImgUrl: 'https://img2.baidu.com/it/u=2881906081,2563875946&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=296',
          dogName: '阿拉斯加',
        },
        {
          dogImgUrl: 'https://img2.baidu.com/it/u=89054294,1130291491&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=442',
          dogName: '萨摩耶',
        },
      ],
      loveArr: [],
    }
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    love(val) {
      this.loveArr.push(val)
    },
  },
}
</script>

<style scoped></style>
